
import { Button, Radio } from "antd-mobile";
import { useNavigate } from "react-router-dom";
import { useEffect, useState } from 'react';

function Index() {
  const nav = useNavigate();
  const [selectedPayment, setSelectedPayment] = useState<string>('');

  type DoctorInfo = {
    id: string;
    name: string;
    title: string;
    avatar: string;
    department: string;
    hospital: string;
  }

  type AppointmentInfo = {
    date: string;
    timeSlot: string;
    department: string;
    fee: number;
  }

  type PatientInfo = {
    id: string;
    name: string;
  }

  const [doctorInfo, setDoctorInfo] = useState<DoctorInfo | null>(null);
  const [appointmentInfo, setAppointmentInfo] = useState<AppointmentInfo | null>(null);
  const [patientInfo, setPatientInfo] = useState<PatientInfo | null>(null);

  const handleBack = () => {
    nav(-1);
  };

  const handlePatientSelect = () => {
    console.log('选择就诊人');
    // 这里可以跳转到就诊人选择页面
  };

  const handlePaymentChange = (value: string) => {
    setSelectedPayment(value);
  };

  const handleConfirmAppointment = () => {
    if (!selectedPayment) {
      alert('请选择支付方式');
      return;
    }
    console.log('确认预约', {
      doctor: doctorInfo,
      appointment: appointmentInfo,
      patient: patientInfo,
      payment: selectedPayment
    });
    if (selectedPayment === 'self-pay') {
      // 跳转到缴费页，传递支付方式及必要信息
      nav('/zhi', {
        state: {
          payment: 'self-pay',
          order: {
            orderNo: 'Q' + Date.now(),
            amount: appointmentInfo?.fee || 0,
            createdAt: Date.now(),
          }
        }
      });
      return;
    }
    // 其他情况（如医保）保持原流程
    nav('/gua');
  };

  useEffect(() => {
    // 模拟获取预约信息
    const mockDoctorInfo: DoctorInfo = {
      id: '1',
      name: '刘医生',
      title: '主任医师',
      avatar: 'https://via.placeholder.com/60x60/4A90E2/FFFFFF?text=刘',
      department: '门诊外一科',
      hospital: '四川省保健院南苑'
    };

    const mockAppointmentInfo: AppointmentInfo = {
      date: '2020-01-27',
      timeSlot: '08:30-12:00(上午)',
      department: '门诊外一科',
      fee: 66.00
    };

    const mockPatientInfo: PatientInfo = {
      id: '1',
      name: '王小柯'
    };

    setDoctorInfo(mockDoctorInfo);
    setAppointmentInfo(mockAppointmentInfo);
    setPatientInfo(mockPatientInfo);
  }, []);

  return (
    <div style={{ width: '100vw', minHeight: '100vh', background: '#f5f5f5' }}>
      {/* 顶部导航栏 */}
      <div style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: '12px 16px',
        background: '#fff',
        borderBottom: '1px solid #f0f0f0'
      }}>
        <div style={{ display: 'flex', alignItems: 'center', gap: '16px' }}>
          <div 
            onClick={handleBack}
            style={{ 
              fontSize: '20px', 
              cursor: 'pointer',
              color: '#333'
            }}
          >
            ‹
          </div>
          <div style={{ fontSize: '18px', fontWeight: 600, color: '#333' }}>
            确认预约
          </div>
        </div>
        
      </div>

      {/* 医生和预约详情卡片 */}
      {doctorInfo && appointmentInfo && (
        <div style={{
          margin: '16px',
          background: '#fff',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          {/* 医生信息 */}
          <div style={{ display: 'flex', alignItems: 'flex-start', gap: '12px', marginBottom: '16px' }}>
            <img
              src={doctorInfo.avatar}
              alt=""
              style={{
                width: '60px',
                height: '60px',
                borderRadius: '50%',
                objectFit: 'cover'
              }}
            />
            <div style={{ flex: 1 }}>
              <div style={{ fontSize: '18px', fontWeight: 600, color: '#333', marginBottom: '4px' }}>
                {doctorInfo.name}
              </div>
              <div style={{ fontSize: '14px', color: '#999', marginBottom: '4px' }}>
                {doctorInfo.title}
              </div>
              <div style={{ fontSize: '14px', color: '#333', marginBottom: '2px' }}>
                {doctorInfo.department}
              </div>
              <div style={{ fontSize: '14px', color: '#333' }}>
                {doctorInfo.hospital}
              </div>
            </div>
          </div>

          {/* 预约详情 */}
          <div style={{ borderTop: '1px solid #f0f0f0', paddingTop: '16px' }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
              <span style={{ fontSize: '14px', color: '#999' }}>预约时间</span>
              <span style={{ fontSize: '14px', color: '#333' }}>
                {appointmentInfo.date} {appointmentInfo.timeSlot}
              </span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: '8px' }}>
              <span style={{ fontSize: '14px', color: '#999' }}>就诊科室</span>
              <span style={{ fontSize: '14px', color: '#333' }}>
                {appointmentInfo.department}
              </span>
            </div>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <span style={{ fontSize: '14px', color: '#999' }}>挂号费用</span>
              <span style={{ fontSize: '16px', color: '#ff6b00', fontWeight: 600 }}>
                ¥{appointmentInfo.fee.toFixed(2)}
              </span>
            </div>
          </div>
        </div>
      )}

      {/* 就诊人信息卡片 */}
      {patientInfo && (
        <div style={{
          margin: '0 16px 16px',
          background: '#fff',
          borderRadius: '12px',
          padding: '16px',
          boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
        }}>
          <div 
            onClick={handlePatientSelect}
            style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              cursor: 'pointer'
            }}
          >
            <span style={{ fontSize: '16px', color: '#333' }}>就诊人</span>
            <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
              <span style={{ fontSize: '16px', color: '#333' }}>{patientInfo.name}</span>
              <span style={{ fontSize: '16px', color: '#999' }}>›</span>
            </div>
          </div>
        </div>
      )}

      {/* 支付方式卡片 */}
      <div style={{
        margin: '0 16px 16px',
        background: '#fff',
        borderRadius: '12px',
        padding: '16px',
        boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
      }}>
        <div style={{ 
          display: 'flex',
          justifyContent: 'space-between',
          alignItems: 'center',
          marginBottom: '16px'
        }}>
          <div style={{ fontSize: '16px', fontWeight: 600, color: '#333' }}>
            支付方式
          </div>
          <div style={{
            display: 'flex',
            alignItems: 'center',
            gap: '8px'
          }}>
            <span style={{ fontSize: '14px', color: '#999' }}>应付金额</span>
            <span style={{ 
              fontSize: '20px', 
              color: '#ff4d4f', 
              fontWeight: 700 
            }}>
              ¥{appointmentInfo?.fee?.toFixed(2) || '0.00'}
            </span>
          </div>
        </div>
        
        <div style={{ marginBottom: '12px' }}>
          <Radio.Group value={selectedPayment} onChange={handlePaymentChange}>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              padding: '16px 12px',
              marginBottom: '8px',
              borderBottom: '1px solid #f0f0f0',
              borderRadius: '8px',
              backgroundColor: selectedPayment === 'self-pay' ? '#f6ffed' : 'transparent',
              border: selectedPayment === 'self-pay' ? '1px solid #b7eb8f' : '1px solid transparent',
              transition: 'all 0.3s ease'
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>自费支付</span>
                <span style={{ fontSize: '12px', color: '#999' }}>支付宝/微信支付</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div style={{ 
                  display: 'flex', 
                  flexDirection: 'column', 
                  alignItems: 'flex-end',
                  gap: '2px'
                }}>
                  <span style={{ fontSize: '18px', color: '#ff4d4f', fontWeight: 600 }}>
                    ¥{appointmentInfo?.fee?.toFixed(2) || '0.00'}
                  </span>
                  <span style={{ fontSize: '10px', color: '#999' }}>全额支付</span>
                </div>
                <Radio value="self-pay" />
              </div>
            </div>
            <div style={{
              display: 'flex',
              justifyContent: 'space-between',
              alignItems: 'center',
              padding: '16px 12px',
              borderRadius: '8px',
              backgroundColor: selectedPayment === 'insurance' ? '#f6ffed' : 'transparent',
              border: selectedPayment === 'insurance' ? '1px solid #b7eb8f' : '1px solid transparent',
              transition: 'all 0.3s ease'
            }}>
              <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>
                <span style={{ fontSize: '16px', color: '#333', fontWeight: 500 }}>医保支付</span>
                <span style={{ fontSize: '12px', color: '#999' }}>医保卡直接扣费</span>
              </div>
              <div style={{ display: 'flex', alignItems: 'center', gap: '12px' }}>
                <div style={{ 
                  display: 'flex', 
                  flexDirection: 'column', 
                  alignItems: 'flex-end',
                  gap: '2px'
                }}>
                  <span style={{ fontSize: '18px', color: '#ff4d4f', fontWeight: 600 }}>
                    ¥{appointmentInfo?.fee?.toFixed(2) || '0.00'}
                  </span>
                  <span style={{ fontSize: '10px', color: '#52c41a' }}>医保报销</span>
                </div>
                <Radio value="insurance" />
              </div>
            </div>
          </Radio.Group>
        </div>
      </div>

      {/* 底部确认按钮 */}
      <div style={{
        position: 'fixed',
        bottom: 0,
        left: 0,
        right: 0,
        padding: '16px',
        background: '#fff',
        borderTop: '1px solid #f0f0f0'
      }}>
        <Button
          color="primary"
          block
          size="large"
          onClick={handleConfirmAppointment}
          style={{
            borderRadius: '8px',
            height: '48px',
            fontSize: '16px',
            fontWeight: 600
          }}
        >
          确认预约
        </Button>
      </div>

      {/* 底部占位，避免按钮遮挡内容 */}
      <div style={{ height: '80px' }}></div>
    </div>
  );
}

export default Index;
